<template>
  <div class="ict-menber-view">
    <ict-titlebar :left-options="{showBack: true}" v-el:titlebar>推荐体系说明</ict-titlebar>
    <div class="menber-info-box" :height.sync="boxHeight">
      <ul>
        <li>1.每邀请1名新用户参与合伙人计划即可获得79元现金奖励。每邀请5名新用户人额外获得100元现金奖励。</li>
        </br>
        <li>2.邀请用户来长投学堂学习课程，合伙人（邀请人）会拿到课程花费的40%返现；被邀请人学完课程，返现10%作为奖学金。</li>
      </ul>
      <img src="../../../static/image/menber/sharePartner.png" alt="">
    </div>
  </div>
</template>
<script>
import Badge from 'vux/badge'
import IctTitlebar from '../../components/IctTitleBar.vue'
import IctButton from '../../components/IctButton.vue'
import IctItem from '../../components/IctItemButton.vue'
import {Flexbox, FlexboxItem} from 'vux/flexbox'
import Scroller from 'vux/scroller'
export default {
  data () {
    return {
      boxHeight: '480px'
    }
  },
  route: {
    data () {
      setTimeout (() => {
        this.bgHeight()
      }, 1000)
    }
  },
  methods: {
    // 文档高度
    bgHeight () {
      const me = this
      const {titlebar} = this.$els
      me.boxHeight = (window.document.body.offsetHeight - titlebar.offsetHeight) + 'px'
    },
    qrcodeRec () {
      this.$router.go('/menber-recommend')
    },
    menberRec () {
      this.$router.go('/menber-recommend')
    }
  },
  components: {
    IctTitlebar,
    IctButton,
    IctItem,
    Flexbox,
    FlexboxItem,
    Badge,
    Scroller
  }
}
</script>
<style lang="less">
  @import "../../assets/styles/icon.less";
  .ict-setting-view{
    p {
      margin: 0;
    }
    .ict-item:active {
      background-color: #ccc;
      color:black;
    }
    .into-icon:before{
      font-family: 'myicon';
      content: '\e913';
      color: #898989;
    }
    .ict-btn{
      width: 6.5rem;
      height: 1.8rem;
      border: 1px solid #00b0f0;
      border-radius: 5px;
      background: #fff;
      min-height: 0;
      padding: 0;
      color: #00b0f0;
      font-size: 0.85rem;
    }
    .itemOnFocus{
      background-color: black;
      color: white;
    }
  }
  .recommend-box {
    margin: 0.5rem;
    display: flex;
    background-color: white;
    .recommend {
      flex: 1;
      text-align: center;
      margin: 1rem;
      height:2rem;
      line-height:2rem;
      background-color: #00b0f0;
      color: white;
      font-size: 12px;
      /*padding: 0.5rem;*/
      border-radius: 5px;
    }
  }
  .menber-info-box {
    height:100%;
    margin: 0.5rem 0.5rem 0rem 0.5rem;
    padding: 0.5rem;
    background-color: white;
    text-align: center;
    font-size: 12px;
    color: #aaa;
    img {
      width:100%;
    }
    .info {
      height: 15rem;
      padding: 0.5rem 0;
      background-color: white;
      margin: 1rem;
      text-align:center;
      .menber-row {
        margin:0.5rem;
        display: flex;
        .menber-t {
          flex: 1;
        }
      }
    }
    .withdraw {
      color: white;
      /*margin: 1rem;*/
      p {
        margin: 3rem;
        /*padding: 0.5rem;*/
        height:2rem;
        line-height:2rem;
        background-color: #00b0f0;
        border-radius: 5px;
      }
    }
    ul {
      list-style-type:none;
      width:70%;
      text-align:left;
    }
  }
  .instruction-box {
    font-size: 10px;
    margin: 0.5rem;
    background-color: white;
    display: flex;
    .instruction {
      flex: 1;
      padding: 1rem;
      color: #00b0f0;
      text-align: center;
    }
  }
</style>
